<template>
	<view class="distributionDetails">
		<view class="search-content">


			<image class="search-img" :src="search" mode=""></image>
			<input placeholder="请搜索推广员名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

		</view>
		<view class="flex-between margin_40rpx_0 " style="padding: 0 15rpx;">
			<view class="all flex" @click="allFn()">
				<text style="margin-left: 4rpx;">{{textDesc}}</text>
				<uni-icons style="margin-top: 2rpx;" type="down" color='#fff' size="12"></uni-icons>
			</view>
            <picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate"
            	:end="endDate" @change="bindDateChange">
            	<view class="flex-align-center-justify-start  color6">
            		<view class="">
            			{{ yeartime }}
            			<text>-</text>
            			{{ monthtime }}
            		
            			<uni-icons type="right" color='#333' size="16"></uni-icons>
            		</view>
            	
            	</view>
            
            </picker>
		

		</view>
		<!-- 明细列表 -->
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">

			<block v-for="(item,index) in list" :key="index">
				<view class="performanceList">
					<view class="padding-bottom_30rpx border-bottom-f7f7f7">
						<view class="flex-between">
							<view class="flex-start-center">
								<!-- <image class="headImg" src="../static/img/face.jpg" mode=""></image> -->
								<view class="margin-left_20rpx">
									<view class="">
										{{item.name}}
									</view>
									<view class=" flex-start-center" style="margin-top: 5rpx;">
										<text style="color: #999999;">账号:{{item.account}}</text>
										<view v-if="item.state==1" class="normal flex margin-left_10rpx">
											<text>正常</text>
										</view>
										<view v-if="item.state==2" class="disable flex margin-left_10rpx">
											<text>禁用</text>
										</view>
									</view>

								</view>
							</view>
							<view class="flex-column-end">
								<!-- <view class="font-weight_bold">{{item.surplus_income}}</view> -->
								<view class="flex margin-top_16rpx" @click="administrationFn(item)">
									<view style="color: #009EFF;" class="">管理</view>
									<uni-icons color="#009EFF" type="right" size="15"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-wrap-justifyBetween padding_20rpx_0 border-bottom-f7f7f7">
						<view class="flex-column " style="width: 33.3%; height:100rpx ;">

							<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
								<text>用户总数</text>
							</view>
							<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
								{{totelName(item.totayUser)}}
							</view>

						</view>
						<view class="flex-column " style="width: 33.3%; height:100rpx ;">

							<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
								<text>今日新增用户</text>
							</view>
							<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
								{{totelName(item.todayAddUserNum)}}
							</view>

						</view>
						<view class="flex-column " style="width: 33.3%; height:100rpx ;">

							<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
								<text>月新增用户</text>
							</view>
							<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
								{{totelName(item.monthAddUserNum)}}
							</view>

						</view>
						<view class="flex-column " style="width: 33.3%; height:100rpx ;">

							<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
								<text>累计收益{{'('+currency_name+')'}}</text>
							</view>
							<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
								{{totelName(item.totayIncome)}}
							</view>

						</view>
						<view class="flex-column " style="width: 33.3%; height:100rpx ;">

							<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
								<text>今日收益{{'('+currency_name+')'}}</text>
							</view>
							<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
								{{totelName(item.todayIncome)}}
							</view>

						</view>
						<view class="flex-column " style="width: 33.3%; height:100rpx ;">

							<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
								<text>昨日收益{{'('+currency_name+')'}}</text>
							</view>
							<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
								{{totelName(item.yesterdayIncome)}}
							</view>

						</view>

					</view>
					<view class="flex padding-top_20rpx" style="color: ;">

						<view class="flex margin-top_16rpx" @click="trackFn(item)">
							<view style="color: #009EFF;" class="">业绩追踪</view>
							<uni-icons color="#009EFF" type="right" size="15"></uni-icons>
						</view>
					</view>
				</view>

			</block>
			<!-- <block>
				<view class="performanceDetailedList">
					<view class="flex-between">
						<view class="font-overflow" style="width: 400rpx;">
							邀请某某用户邀请某某用户邀请某某用户邀请某某用户
						</view>
						<view class="font-weight_bold" style="color: red;">
							{{'233('+currency_name+')'}}
						</view>
					</view>
					<view class="flex-between margin-top_20rpx padding-bottom_20rpx border-bottom-f7f7f7">
						<view class="flex-start-center">
							<image class="headImg margin-right_16rpx" src="../static/img/face.jpg" mode=""></image>
							<text>ces1dds</text>
						</view>
						<view class="">
							<text>2023-04-22 10:06</text>
						</view>
					</view>
					<view class="flex-between">
						<view class="bgBlue flex-column" v-for="(item,index) in detailedInformationList" :key="index">
							 <view class="font-weight_bold">
							 	 {{item.text}}
							 </view>
							 <view class="margin-top_10rpx" style="color: #0084FF;">
							 	 <text>{{totelName(item.number)}}</text>
							 </view>
						</view>
					</view>
				</view>
				
			</block> -->

			<!-- <block v-for="(item,index) in list" :key="index">
				<view class="detailedList">
					<view class="flex-between margin-bottom_20rpx">
						<view class="font-weight_bold">
							{{orderStatusFn(item.operation_source)}}
						</view>
						<view style="color: #A265FC;" class="font-weight_bold">
							{{item.amount_direction==1?'+':'-'}}{{item.amount +(item.amount_type==1?' 余额('+currency_name+')':' 收益('+currency_name+')')}}
						</view>
					</view>
					<view class="flex-between" style="color: rgb(117, 117, 117);;">
						<view class="flex-column-start">
							<text>赠送{{currency_name}}:{{item.gifts_amount}}</text>
							<text v-if="item.amount_type==1"
								style="margin-top: 5rpx;">优惠折扣:{{item.ratio=='0.00'?'0.00':100-Number(item.ratio)}}%</text>
							<text v-if="item.amount_type==2" style="margin-top: 5rpx;">优惠折扣:{{item.ratio}}%</text>
						</view>
						<view class="">
							{{item.amount_type==1?'余额变动':'收益变动'}}
						</view>
					</view>
				</view>
			</block> -->
		</mescroll-body>
		<view class="confirmRecharge flex" @click="addPromoterFn()">
			添加推广员
		</view>
		<sunui-popup ref="modifyEmployeeInfo">
			<template v-slot:content>

				<view class="moreActiveButton">
					<view class="add" @click.stop="authorityFn(4,'全部')">
						全部
					</view>
					<view class="add" @click.stop="authorityFn(3,'业绩')">
						业绩
					</view>
					<view class="add" @click.stop="authorityFn(1,'正常')">
						正常
					</view>
					<view class="delete" @click.stop="authorityFn(2,'禁用')">
						禁用
					</view>
				



				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				search: this.$img.search,
				currency_name: uni.getStorageSync("system").currency_name,
				userInfo: uni.getStorageSync("userInfo"),
				associateGetInfo: uni.getStorageSync("associateGetInfo"),
				date: currentDate,
				tabIndex: 4,
				currentTime: '2',
				navIndex: 0,
				searchVal: '',
				// 明细详情
				detailedInformationList: [{
					number: '张小花',
					text: '推广员'

				}, {

					number: 1538.25,
					text: '本月业绩'

				}, {

					number: 12555.50,
					text: '昨日业绩'

				}],
				// 推广明细
				promotionDetails: [{
					number: 21,
					text: '用户总数'

				}, {

					number: 2,
					text: '今日新增用户'

				}, {

					number: 12,
					text: '昨日新增用户'

				}, {

					number: 21.50,
					text: '累计收益(' + uni.getStorageSync("system").currency_name + ')'

				}, {

					number: 3.50,
					text: '今日收益(' + uni.getStorageSync("system").currency_name + ')'

				}, {

					number: 10.00,
					text: '昨日收益(' + uni.getStorageSync("system").currency_name + ')'
				}],
				tabList: [{
					name: '直推粉丝',
					id: '1' //null
				}, {
					name: '间推粉丝',
					id: '2' //null
				}, ],
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				// daytime: currentDate.split('-')[2],
				token: uni.getStorageSync('login').token,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				myTeam: null,
				userinfoOj: null,
				amount_type: 1,
				dataFilter:'',
				isTotayIncom:undefined,
				state:'',
				textDesc:'全部'
			}
		},
		onLoad(options) {
			this.amount_type = options.amount_type
			console.log(this.amount_type)
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},

			});
			this.userInformation()
			this.init()
		},
		onShow() {
			this.userInformation()
			this.mescroll?.resetUpScroll();

		},
		computed: {

			// 订单状态 '1 待审核 2 上架中 3 下架 4 驳回',
			orderStatusFn: function() {
				return function(status) {
					// 1 待接单 2 接单中 3 完成 4 已结算 4拒绝订单
					let orderStatus = '';

					orderStatus =
						status == 0 ? '充值 ' : status == 1 ? '充值' : status == 2 ? '加入搭子' : status == 3 ? '退出搭子' :
						status == 4 ? '搭子完成收益' : status == 5 ? '提现' : status == 6 ? '下单服务' : status == 7 ? '退出服务' :
						status == 8 ? '服务完成' : status == 9 ? '搭子分佣' : status == 10 ? '服务分佣' : status == 11 ?
						'退出搭子补偿' :
						status == 12 ? '加入社区扣除' : status == 13 ? '社区收益' : status == 14 ? '社区分佣' : status == 16 ?
						'后台添加' + this.currency_name : status == 17 ? '后台扣除' + this.currency_name :
						status == 18 ? '查看手机号' : status == 19 ? '退回申请手机号' : status == 20 ? '搭子置顶' : status == 21 ?
						'服务置顶' : status == 22 ? '用户拉新(合伙人)' : status == 23 ? '充值返佣' :
						status == 24 ? '购买vip佣金' : status == 25 ? '聊天扣费' : status == 26 ? '填写资料' : status == 27 ?
						'新用户注册' : status == 28 ? '用户拉新' : status == 29 ? '手机认证' : status == 30 ? '实名认证' : '收益转余额'


					return orderStatus;
				};
			},
			totelName: function() {
				return function(num) {


					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}



				};
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
		},
		methods: {
            bindDateChange(e) {
            	// console.log( e)
            
            	// 	this.createTime = e.detail.value
            	console.log(e.detail.value)
            
            	this.dataFilter = e.target.value;
            	// 	/* 在上面声明变量，split是用来截取字段*/
            	// 	this.yeartime = this.date.split('-')[0];
            	// 	this.monthtime = this.date.split('-')[1];
            	// this.daytime = this.date.split('-')[2];
               this.mescroll?.resetUpScroll();
            
            },
			authorityFn(index,textDesc) {
				this.textDesc=textDesc
				if(index==3){
					this.isTotayIncom=1
					
				}else if(index==4){
					this.isTotayIncom=undefined
					this.state=''
				}else if (index==1){
					this.state=1
				}else if(index==2){
					this.state=2
				}
				this.$refs.modifyEmployeeInfo.close()
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			},
			allFn() {
				this.$refs.modifyEmployeeInfo.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 100000,

				});
			},
			addPromoterFn() {
				this.$sun.navGo('/pagesB/index/promotersSetting')
			},
			administrationFn(item) {
				this.$sun.navGo('/pagesB/index/promotersSetting', {
					...item
				})
			},
			trackFn(item) {
				this.$sun.navGo('/pagesB/index/performanceTracking',{id:item.id})
			},
			async init() {



				const res = await this.$http.post({
					url: this.$api.income,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				console.log(res)
				if (res.code == 0) {
					// 跳转到登录页面
					this.myTeam = res.data


					console.log(res.data)

				} else {

					this.$sun.toast(res.message, 'none')
				}
			},
			withdrawal() {
				this.$sun.navGo('/pagesA/personalCenter/applyWithdrawal')
			},
			async userInformation() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					this.userinfoOj = result.data


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},



			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.promoterList,
					data: {
						page: scroll.num,
						limit: 10,
						pid: this.associateGetInfo.id,
						name: this.searchVal,
						data:this.dataFilter,
						isTotayIncom:this.isTotayIncom,
						state:this.state



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.count = result.data.count
					// this.count=10
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					// this.mescroll.endByPage(result.data.length, this.$sun.pagingSum(10, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				}
			},

		},

	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
		padding: 30rpx;
	}

	.distributionDetails {
		.confirmRecharge {
			position: fixed;
			bottom: 90rpx;
			width: 708rpx;
			height: 104rpx;
			border-radius: 102rpx;
			color: #fff;
			background: #0084FF;
		}

		.moreActiveButton {


			background-color: #fff;

			.flex-center() {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.moreActiveButton {


				background-color: #fff;


				.add {
					height: 100rpx;
					color: #6568F6;
					font-size: 28rpx;
					font-family: Inter;

					.flex-center();
					border: 2rpx solid #f7f7f7;


				}

				.delete {
					.flex-center();
					height: 100rpx;


					color: #FF4636;
					font-size: 28rpx;
					font-family: Inter;
					box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
				}


			}

			.add {
				height: 100rpx;
				color: #6568F6;
				font-size: 28rpx;
				font-family: Inter;

				.flex-center();
				border: 1px solid #f7f7f7;


			}

			.delete {
				.flex-center();
				height: 100rpx;


				color: #FF4636;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
			}


		}

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 30rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.cardDetail {
			margin-bottom: 20rpx;
			height: 260rpx;
			border-radius: 10rpx;

			background: rgb(255, 255, 255);
			padding: 40rpx;

			.recharge {
				width: 152rpx;
				height: 68rpx;
				border-radius: 200rpx;
				color: rgb(255, 255, 255);
				background: #1E6CEB;
			}
		}

		.all {
			width: 102rpx;
			height: 46rpx;
			border-radius: 10rpx;
			color: rgb(255, 255, 255);
			background: #1E6CEB;
		}

		.detailedList {

			// height: 152rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			background: rgb(255, 255, 255);
		}

		.performanceList {


			padding: 30rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.normal {
				width: 70rpx;
				height: 40rpx;
				border-radius: 5px;
				color: #fff;
				background: rgb(0, 183, 0);
			}

			.disable {
				width: 70rpx;
				height: 40rpx;
				border-radius: 5px;
				color: #fff;
				background: red;
			}

			.headImg {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}

		.performanceDetailedList {

			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 20rpx;

			.headImg {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
			}

			.bgBlue {
				width: 30%;
				height: 64px;
				background: rgb(245, 249, 253);
			}

		}
	}
</style>